<template>
  <video id="myVideo" class="video" />
</template>
<script>
export default {
  name: 'TcPlayer',
  props: {
    src: {
      type: String,
      required: true,
    }
  },
  data: function () {
    return {
      tcplayer: null
    }
  },
  watch: {
    src: function () {
      this.tcplayer.src(this.src)
    }
  },
  mounted () {
    setTimeout(() => {
      this.init()
    }, 500)
  },
  destroyed () {
    this.tcplayer.dispose()
    this.tcplayer = null
  },
  methods: {
    init () {
      this.tcplayer = window.TCPlayer('myVideo', {
        autoplay: true
      })
      this.tcplayer.ready(() => {
        if (this.src) {
          this.tcplayer.src(this.src)
        }
      })
      this.tcplayer.on('error', function (error) {
        console.log('tcplayer', error)
      })
    }
  }
}
</script>
  <style scoped lang="scss">
  .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .video-js .vjs-tech {
    object-fit: cover !important;
  }
  </style>

